<template>
    <div class="box courseDetail">
        <header-tit img="courT.png" tit="需求管理" back="1"/>
        <div class="content">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left" label-width="80px">
                <el-form-item label="姓名" prop="customerName">
                    <el-input v-model="ruleForm.customerName" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="customerPhone">
                    <el-input v-model="ruleForm.customerPhone" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="车系" prop="vehicleSeries">
                    <el-input v-model="ruleForm.vehicleSeries" placeholder="请输入车系"></el-input>
                </el-form-item>
                <el-form-item label="车型" prop="vehicleModel">
                    <el-input v-model="ruleForm.vehicleModel" placeholder="请输入车型"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="mark">
                    <el-input type="textarea" v-model="ruleForm.mark" placeholder="请输入备注"></el-input>
                </el-form-item>
                <el-form-item label="下单时间" prop="createdAt">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.createdAt"
                                        style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="图片" prop="adUrl">
                    <el-upload
                            class="avatar-uploader"
                            :data="{ token: $store.state.Account.QnInfo.token }"
                            action="http://up-z0.qiniu.com"
                            :show-file-list="false"
                            :on-success="successFile"
                    >
                        <img v-if="ruleForm.adUrl" :src="ruleForm.adUrl" class="img">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div style="color:#F55D54">
                        PNG，GIF
                        上传大小：1920*500
                    </div>
                </el-form-item>
                <el-form-item label="图片" v-if="ruleForm.id">
                    <img class="img" :src="ruleForm.adUrl" alt>
                </el-form-item>
            </el-form>
            <div class="bo mar">
                <!-- <el-button type="primary">预览</el-button> -->
                <el-button type="primary" @click="createdNeed()">提交</el-button>
            </div>
        </div>
    </div>
</template>

<script>
  import { Course, Teacher, Account } from "api"
  import E from "wangeditor"

  import { uploadInit } from "utils"
  import { mapState } from "vuex"
  export default {
    data () {
      return {
        ruleForm: {
          adUrl:'',
          customerName: "",
          customerPhone: "",
          vehicleSeries: "",
          vehicleModel: "",
          mark: "",
          createdAt: "",
        },
        price: 0,
        filter: {
          offset: 0,
          limit: 100000,
          name: "",
          subjectId: "",
          gradeId: "",
          status: ""
        },
        teacherIds: [],
        editor1: "",
        editor: "",
        teachers: [],
        rules: {
          customerName: [{ required: true, message: "请输入用户名称", trigger: "change" }],
          customerPhone: [{ required: true, message: "请输入用户手机号", trigger: "change" }],
          vehicleSeries: [{ required: true, message: "请输入车系", trigger: "change" }],
          vehicleModel: [{ required: true, message: "请输入车型", trigger: "change" }],
          mark: [{ required: true, message: "请输入备注", trigger: "change" }],
          createdAt: [{ required: true, message: "请选择时间", trigger: "change" }],
        }
      }
    },

    computed: {
      ...mapState({
        QiuniuToken: state => state.Account.QnInfo.token,
        QiuniuDomain: state => state.Account.QnInfo.domainName
      })
    },

    watch: {
      price (n) {
        this.ruleForm.price = n * 100
      }
    },

    async mounted () {
      if (this.$route.query.id) {
        let res = await Course.querySchoolDetail(this.$route.query.id)
        this.ruleForm = res.data
        this.teacherIds = this.ruleForm.teachers ? this.ruleForm.teachers.map(item => item.id) : []
        this.ruleForm.desc = this.ruleForm.desc ? this.ruleForm.desc : ""
        this.ruleForm.outline = this.ruleForm.outline ? this.ruleForm.outline : ""
        this.price = this.ruleForm.price / 100
      }
      let res = await Account.queryQnToken()
      this.$store.commit("Account/QUERY_QTOKEN", res.data)
      this.remoteMethod()
      this.editor = new E(this.$refs.editor)
      // 使用 base64 保存图片
      this.editor.customConfig.uploadImgShowBase64 = false

      // 隐藏“网络图片”tab
      this.editor.customConfig.showLinkImg = false

      // 允许上传到七牛云存储
      this.editor.customConfig.qiniu = true

      this.editor.create()
      if (this.$route.query.id) {
        this.editor.txt.html(this.ruleForm.desc)
      }
      uploadInit({
        token: this.QiuniuToken,
        domain: this.QiuniuDomain
      })(this.editor)

      this.editor1 = new E(this.$refs.editor1)
      // 使用 base64 保存图片
      this.editor1.customConfig.uploadImgShowBase64 = false

      // 隐藏“网络图片”tab
      this.editor1.customConfig.showLinkImg = false

      // 允许上传到七牛云存储
      this.editor1.customConfig.qiniu = true

      this.editor1.create()
      if (this.$route.query.id) {
        this.editor1.txt.html(this.ruleForm.outline)
      }
      uploadInit({
        token: this.QiuniuToken,
        domain: this.QiuniuDomain
      })(this.editor1)
    },

    methods: {
      async createdNeed () {
        try {
          // this.ruleForm.desc = this.editor.txt.html()
          // this.ruleForm.outline = this.editor1.txt.html()
          await this.$refs["ruleForm"].validate()
          // this.ruleForm.teacherIds = this.$route.query.id ? this.teacherIds.map(item => item.id).join(":") : this.teacherIds.join(":")
          this.ruleForm.teacherIds = this.teacherIds.join(":")
          console.log(this.ruleForm.teacherIds)
          // console.log(this.teacherIds.join(":"))
          await Course.createdNeed(this.ruleForm)
          this.$message.success("成功")
          this.$router.push("course")
        } catch (err) {
          console.log(err)
          this.ruleForm.teacherIds = []
        }
      },

      async remoteMethod (query) {
        // this.filter.name = query
        let res = await Teacher.querySchool(this.filter)
        this.teachers = res.data
      },

      successFile (e) {
        this.ruleForm.coverUrl = this.$store.state.Account.QnInfo.domainName + e.key
      },

      successSwiper (e) {
        this.ruleForm.carouselUrl.push(this.$store.state.Account.QnInfo.domainName + e.key)
      },

      async handleRemove (i) {
        await this.$confirm("确定删除该轮播图")
        this.ruleForm.carouselUrl.splice(i, 1)
      }
    }
  }
</script>
<style lang="less" scoped>
    .content {
        padding: 50px 10%;
        color: #626262;
    }
    .formInlines {
        .demo-form-inline {
            display: flex;
            justify-content: space-between;
            .grade-margin {
                margin-right: 0;
            }
        }
    }
    .fi {
        margin-right: 20px;
        width: 350px;
    }
    .img_box {
        width: 1.64rem;
        height: 1.23rem;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(191, 191, 191, 1);
        position: relative;
        margin: auto;
    }
    .img_box > div {
        text-align: center;
        .tit_font {
            text-align: center;
            width: 100%;
        }
        input {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
    }
    .bo {
        margin-top: 50px;
        text-align: center;
        .el-button {
            width: 200px;
        }
    }
    .to {
        border-top: 1px solid #ebebeb;
        padding-top: 30px;
    }
    .info {
        display: flex;
    }
    .deta {
        width: 200px;
    }
    .img {
        width: 100px;
        height: 100px;
        margin-left: 10px;
    }
    .swo {
        display: flex;
        align-items: center;
    }
</style>
